<template>
    <div class="page-content">
        <!-- 鸽棚选择 -->
        <dovecote-info v-show="dataList"></dovecote-info>
        <!-- 数据统计 -->
        <data-count v-show="dataList"></data-count>
        <!-- 表格头部 -->
        <table-bar :columns="columns" @changeColumn="changeColumn">
            <div slot="top">
                <el-form label-width="4.375rem">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="状态：">
                                <el-select
                                    v-model="value"
                                    clearable
                                    placeholder="请选择"
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in options"
                                        :key="item.label"
                                        :label="item.label"
                                        :value="item.label"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col
                            :xs="24"
                            :sm="12"
                            :lg="6"
                            style="float: right; margin-right: 0.625rem"
                        >
                            <el-button type="primary" @click="chooseCage"
                                >搜索</el-button
                            >
                            <el-button @click="reset">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!-- 切换按钮 -->
            <el-tooltip
                slot="button1"
                effect="dark"
                content="数据图表"
                placement="top-start"
            >
                <el-button
                    icon="el-icon-pie-chart"
                    size="small"
                    @click="cut()"
                />
            </el-tooltip>
        </table-bar>
        <!-- 表格 -->
        <div v-show="dataList">
            <the-table :data="data">
                <el-table-column label="鸽笼照片" v-if="columns[0].show">
                    <template slot-scope="scope">
                        <img
                            class="avatar"
                            :src="
                                'http://120.77.156.205:9800' + scope.row.picUrl
                            "
                            @click="priewPicture(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="position"
                    label="鸽笼编号"
                    v-if="columns[1].show"
                >
                </el-table-column>
                <el-table-column label="鸽笼状态" v-if="columns[2].show">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state === 1" type="danger"
                            >将照蛋</el-tag
                        >
                        <el-tag v-else-if="scope.row.state === 2" type="primary"
                            >将抽蛋</el-tag
                        >
                        <el-tag v-else-if="scope.row.state === 3" type="primary"
                            >已抽蛋</el-tag
                        >
                        <el-tag v-else-if="scope.row.xf === 3" type="success">
                            将查仔
                        </el-tag>
                        <el-tag v-else-if="scope.row.state === 4" type="danger"
                            >已照蛋</el-tag
                        >
                        <el-tag v-else-if="scope.row.state === 0" type="info"
                            >无蛋</el-tag
                        >
                        <el-tag v-else-if="scope.row.state === 5" type="success"
                            >已查仔</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column
                    prop="abnormal"
                    label="异常情况"
                    v-if="columns[3].show"
                >
                    <template slot-scope="scope">
                        <!-- 提示框显示当前异常数据 -->
                        <el-popover
                            placement="top-end"
                            width="350"
                            trigger="hover"
                        >
                            <echart-one :allData="scope.row"></echart-one>
                            <el-tag
                                type="info"
                                v-if="
                                    (scope.row.state === 0 &&
                                        scope.row.abnormal === null) ||
                                    (scope.row.state === 1 &&
                                        scope.row.abnormal === null) ||
                                    (scope.row.state === 2 &&
                                        scope.row.abnormal === null) ||
                                    (scope.row.state === 3 &&
                                        scope.row.abnormal === '0') ||
                                    (scope.row.state === 4 &&
                                        scope.row.abnormal === '0') ||
                                    (scope.row.state === 5 &&
                                        scope.row.abnormal.substring(0, 1) ===
                                            '0')
                                "
                                slot="reference"
                                >无异常</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    (scope.row.state === 3 ||
                                        scope.row.state === 4) &&
                                    scope.row.abnormal === '1'
                                "
                                slot="reference"
                                >单蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    (scope.row.state === 3 ||
                                        scope.row.state === 4) &&
                                    scope.row.abnormal === '2'
                                "
                                slot="reference"
                                >一个未受精蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    (scope.row.state === 3 ||
                                        scope.row.state === 4) &&
                                    scope.row.abnormal === '3'
                                "
                                slot="reference"
                                >两个未受精蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    (scope.row.state === 3 ||
                                        scope.row.state === 4) &&
                                    scope.row.abnormal === '4'
                                "
                                slot="reference"
                                >一次踩蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    (scope.row.state === 3 ||
                                        scope.row.state === 4) &&
                                    scope.row.abnormal === '5'
                                "
                                slot="reference"
                                >两次踩蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    scope.row.state === 5 &&
                                    scope.row.abnormal.substring(0, 1) === '1'
                                "
                                slot="reference"
                                >一个臭蛋</el-tag
                            >
                            <el-tag
                                type="danger"
                                v-if="
                                    scope.row.state === 5 &&
                                    scope.row.abnormal.substring(0, 1) === '2'
                                "
                                slot="reference"
                                >两个臭蛋</el-tag
                            >
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    label="更新时间"
                    v-if="columns[4].show"
                >
                </el-table-column>
            </the-table>
            <el-pagination
                :page-sizes="[1, 5, 10, 15]"
                :page-size="cagePageSize"
                :current-page="cagePageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="cageTotal"
                class="page"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                v-if="pageShow"
            >
            </el-pagination>
        </div>
        <!-- 弹出框展示鸽笼图片 -->
        <el-dialog
            class="counter"
            title="鸽笼图片"
            :visible.sync="dialogVisible"
            style="width: 100%"
            @close="closeDialog"
        >
            <!-- <slide-show :clearTimer="clearTimer"></slide-show> -->
            <img
                v-if="!isVideo"
                :src="avatar"
                style="width: 37.5rem; height: 25rem"
            />
            <iframe
                v-if="isVideo"
                :src="videoUrl"
                width="600"
                height="400"
                allowfullscreen
            ></iframe>
            <div slot="footer" class="dialog-footer">
                <el-button type="success">切换视频</el-button>
            </div>
        </el-dialog>
        <div v-show="!dataList">
            <el-row :gutter="20">
                <el-col :span="12"
                    ><el-card
                        ><echart-six
                            :cageCountData="cageCountData"
                            :legrndData="legrndData"
                            :totalCage="totalCage" /></el-card
                ></el-col>
                <el-col :span="12"
                    ><el-card><echart-three /></el-card
                ></el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
import {
    chooseCageData,
    getLayEggsTimeCage,
} from "../../../api/Dovecote/InfoManage/NotLayEggs";
import { getCageCount } from "../../../api/Dovecote/InfoManage/AllHouse";
import DovecoteInfo from "../../../components/common/DovecoteInfo.vue";
import TableBar from "../../../components/common/TableBar.vue";
import dataCount from "../../../components/Dovecote/InfoManage/dataCount.vue";
import slideShow from "../../../components/Dovecote/InfoManage/slideshow.vue";
import echartOne from "../../../components/Dovecote/InfoManage/echartOne.vue";
import echartTwo from "../../../components/Dovecote/InfoManage/echartTwo.vue";
import echartThree from "../../../components/Dovecote/InfoManage/echartThree.vue";
import EchartSix from "../../../components/Dovecote/InfoManage/echartSix.vue";
export default {
    name: "NotLayEggs",
    meta: {
        title: "未产卵",
    },
    created() {
        this.getCageCountData(); //获得各种鸽笼数量
        this.getLayEggsTimeCageData(); //获取孵化中鸽笼数据
    },
    data() {
        return {
            //鸽棚数据分页编号
            dovecotePageNum: 1,
            //鸽棚数据分页数据条数
            dovecotePageSize: 10,
            //鸽棚数据携带参数
            dovecoteParams: {
                baseId: 3, //当前只有这个基地有数据，后面要选择那个基地再改变这个参数
            },
            //鸽笼数据分页编号
            cagePageNum: 1,
            //鸽笼数据分页数据条数
            cagePageSize: 5,
            //鸽笼数据携带参数
            cageParams: {
                baseId: "", //基地id
                dovecoteNumber: "", //鸽棚编号
            },
            //筛选鸽笼数据携带参数
            chooseCageParams: {
                baseId: "",
                dovecoteNumber: "",
                state: "",
                pageNum: 1,
                pageSize: 5,
            },
            //鸽笼数量携带参数
            cageCountParams: {
                baseId: "",
                dovecoteNumber: "",
            },
            //各种状态鸽笼数量
            cageCountData: [],
            legrndData: [], //各种状态鸽笼数量图表的图例
            totalCage: 0, //各种状态鸽笼总数
            haveData: false, //判断图表是否有数据
            //鸽笼总数
            cageTotal: 0,
            //表格数据
            data: [],
            //分页是否显示
            pageShow: true,
            //下拉框默认值
            value: "全部",
            //下拉框配置
            options: [
                {
                    value: "1",
                    label: "全部",
                },
                {
                    value: "2",
                    label: "无蛋",
                },
            ],
            columns: [
                {
                    name: "鸽笼照片",
                    show: true,
                },
                {
                    name: "鸽笼编号",
                    show: true,
                },
                {
                    name: "鸽笼状态",
                    show: true,
                },
                {
                    name: "异常情况",
                    show: true,
                },
                {
                    name: "更新时间",
                    show: true,
                },
            ],
            cageYData: ["无蛋"],
            //X轴数据
            cageXData: [30],
            //饼图数据
            pieData: [
                { value: 2, name: "单蛋" },
                { value: 5, name: "未受精" },
                { value: 8, name: "踩蛋" },
                { value: 6, name: "坏蛋" },
            ],
            //显示
            dataList: true,
            //关闭定时器
            clearTimer: false,
            //鸽笼暂时图片
            avatar: "",
            //弹框呈现
            dialogVisible: false,
            isChooseAll: true,
            isVideo: false, //是否为视频
            videoUrl: "", //鸽笼视频url
        };
    },
    computed: {
        ...mapState({
            baseInfo: (
                state //基地信息
            ) => state.Usersetting.BaseInfo,
            allDovecoteInfo: (
                state //基地所有鸽棚信息
            ) => state.Usersetting.AllDovecoteInfo,
            currentDovecote: (
                state //当前鸽棚信息
            ) => state.Usersetting.CurrentDovecote,
        }),
    },
    methods: {
        //获取鸽笼信息
        async getLayEggsTimeCageData() {
            //获取鸽笼信息的参数
            this.cageParams.baseId = this.currentDovecote.baseId;
            this.cageParams.dovecoteNumber =
                this.currentDovecote.dovecoteNumber;
            let { data } = await getLayEggsTimeCage(
                this.cagePageNum,
                this.cagePageSize,
                this.cageParams
            );

            // console.log("获取鸽笼信息成功");
            // console.log('获取鸽笼信息成功',data);
            if (data.statusCode === 20000) {
                this.data = data.data.records;
                // console.log(this.data);
                this.cageTotal = data.data.total;
                // if (data.data.size) console.log(this.cageTotal);
            }
        },

        //筛选鸽笼
        async chooseCage() {
            this.data = [];
            // console.log("选择");
            // console.log(this.value);
            //筛选鸽笼参数设置
            this.chooseCageParams.baseId = this.currentDovecote.baseId;
            this.chooseCageParams.dovecoteNumber =
                this.currentDovecote.dovecoteNumber;
            if (this.value === "全部") {
                this.isChooseAll = true;
                this.getLayEggsTimeCageData();
            } else {
                this.chooseCageParams.state = this.value;
                let { data } = await chooseCageData(this.chooseCageParams);
                this.data = data.data.records;
                this.isChooseAll = false;
                // console.log(data.data.records);
            }
        },

        //重置数据
        reset() {
            this.data = [];
            this.value = "全部";
            this.isChooseAll = true;
            this.getAllCageData(); //获取所有鸽笼信息
        },

        //获得各种状态鸽笼数据
        async getCageCountData() {
            // console.log("获取各种状态鸽笼数据");
            //鸽笼状态数量
            this.cageCountParams.baseId = this.currentDovecote.baseId;
            this.cageCountParams.dovecoteNumber =
                this.currentDovecote.dovecoteNumber;
            let { data } = await getCageCount(this.cageCountParams);

            if (data.statusCode === 20000) {
                let dataTemp = data.data;
                for (let i in dataTemp) {
                    //遍历对象
                    if (i === "无蛋") {
                        this.legrndData.push(i); //设置图例

                        let item = {
                            //设置图表数据
                            value: "",
                            name: "",
                        };
                        item.value = dataTemp[i];
                        item.name = i;
                        this.cageCountData.push(item); //图表的数据
                    }
                    this.totalCage += dataTemp[i]; //计算各种鸽笼状态数量合
                }
                this.haveData = true;
            }
            // console.log(this.cageCountData);
            // console.log("end");
        },

        //查看图片
        priewPicture(row) {
            this.dialogVisible = true;
            // this.clearTimer = false;
            // console.log(row);
            // console.log(row.picUrl);
            // console.log("执行");
            this.videoUrl = "http://120.77.156.205:9800" + row.videoUrl; //视频
            this.avatar = "http://120.77.156.205:9800" + row.picUrl; //图片
            // console.log(this.avatar);
        },

        //关闭对话框
        closeDialog() {
            // console.log("ing");
            // this.clearTimer = true;
        },
        //表格数据筛选
        changeColumn(columns) {
            this.columns = columns;
            this.$refs.table.doLayout();
        },

        //切换显示方式
        cut() {
            this.dataList = !this.dataList;
        },

        //改变分页当前页码
        handleCurrentChange(newPage) {
            this.cagePageNum = newPage;
            if (this.isChooseAll) {
                this.getLayEggsTimeCageData(); //获取鸽笼数据
            } else {
                this.chooseCage();
            }
        },

        //改变分页显示条数
        handleSizeChange(newSize) {
            this.cagePageSize = newSize;
            if (this.isChooseAll) {
                this.getLayEggsTimeCageData(); //获取鸽笼数据
            } else {
                this.chooseCage();
            }
        },
    },
    components: {
        DovecoteInfo,
        TableBar,
        dataCount,
        slideShow,
        echartOne,
        echartTwo,
        echartThree,
        EchartSix,
    },
};
</script>

<style lang="scss" scoped>
.page-content {
    img:hover {
        cursor: pointer;
    }
    .avatar {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 50%;
    }
    margin-top: 1.25rem;
    text-align: center;
}
.counter {
    text-align: center;
}
</style>